<template>
    <div>
        <section class="stage">
            <earth ref="earth"> </earth>
            <!--<figure class="ball"><span class="shadow"></span></figure>-->
            <h1>Welcome to Jianzhan Erp System</h1>
            <!--TODO 增加4张图表,Todo List 和 常用自定义模块-->
        </section>
        <el-dialog
                :visible.sync="dialogVisible"
                width="50%"
        >
            <el-card class="box-card" style="text-align: left">
                <div slot="header" class="clearfix">
                    <span>更新日志</span>
                </div>
                <div v-for="(item,idx) in logData" :key="idx">
                    <h3 class="title">{{item.title}}</h3>
                    <div class="text item" v-for="(log,idx) in  item.data" :key="log">
                       {{idx+1}} - {{log}}
                    </div>
                </div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>

    import earth from '../components/common/earth'
    const UPDATE_ID = 'jhwl003'
    export default {
        name: "dashboard",
        data() {
            return {
                logData:[
                    {
                        title:'2020-07-12',
                        data:[
                            '修复配件结算'
                        ]
                    },
                    {
                        title:'2020-07-07',
                        data:[
                            '结算 - 结算内容更新,增加合同,应付款,未付款等信息',
                            '优化一些影响性能的动画'
                        ]
                    },
                    {
                        title:'2020-07-01',
                        data:[
                            '进出口更新-进出口根据权限设定',
                            '进出口更新-进出口增加付款日期'
                        ]
                    }
                ],
                dialogVisible: false,
            }
        },
        components:{
            earth
        },
        beforeDestroy(){
            this.$refs.earth.destroy()
        },
        created() {
            const id = localStorage.getItem('updateId');
            if(id !== UPDATE_ID) {
                this.dialogVisible = true
                localStorage.setItem('updateId',UPDATE_ID)
            }
        },
    }
</script>

<style scoped lang="scss">
    .bg-chocolate {
        background-color: chocolate;
    }

    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        -webkit-transform-style: preserve-3d;
        background: url('http://hop.ie/balls/images/world-map-one-color.png') repeat-x;
        background-size: auto 100%;
        animation: move-map 30s infinite linear;
    }

    .ball:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.5) inset;
        z-index: 2;
    }

    .ball:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-filter: blur(0);
        opacity: 0.3;
        background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
    }

    .ball .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
        transform: rotateX(90deg) translateZ(-150px);
        z-index: -1;
    }

    .stage {
        width: 100%;
        text-align: center;
        height: 300px;
        display: inline-block;
        margin: 20px;
        perspective: 1200px;
        perspective-origin: 50% 50%;
    }

    .cont {
        display: inline-block;
        position: relative;
        margin: 2em auto;
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: 8px;
        box-shadow: 0 0 45px rgba(0, 0, 0, .2);
        padding: 1.5em 2em;
        min-width: calc(40vw + 4em);
    }

    .echarts {
        text-align: center;
        width: 100%;
        height: 100%;
    }

    @keyframes move-map {
        0% {
            background-position: -849px 0;
        }

        100% {
            background-position: 0 0;
        }
    }
</style>